<!-- 番剧的详情页的标头组件 -->
<script setup>
import {ref,defineProps} from "vue"

/**
 * @fan_image : 番剧图片
 * @fan_name : 番剧名称
 * @fan_type : 番剧什么类型，比如:漫画改
 * @fan_theme1 : 番剧是什么主题,比如: 音乐
 * @fan_theme2 : 番剧是什么主题,比如: 日常
 * @fan_status : 番剧什么状态，比如: 已完结.全n话;更新到第n话
 * @fan_year : 番剧是n年的;比如:2022
 */
const props = defineProps({
    fan_image:{type:String},
    fan_name: {type:String},
    fan_year: {type:String},
    fan_type:{type:String},
    fan_theme1:{type:String},
    fan_theme2:{type:String},
    fan_status:{type:String},
    fan_year:{type:String},
})

</script>

<template>
    <div class="fan_title_box">
        <div class="fan_title_back_image_box">
            <img :src="props.fan_image" alt="">
        </div>
        <div class="fan_title_image_box">
            <img :src="props.fan_image" alt="" />
        </div>
        <div class="fan_title_name_box">
            <span>{{ props.fan_name }}</span>
        </div>
        <div class="fan_title_update_time_box">
            <span>{{ props.fan_year }}</span>
        </div>
        <div class="fan_title_type_box">
            <span>{{ props.fan_type }}</span>
        </div>
        <div class="fan_title_theme1_box">
            <span>{{ props.fan_theme1 }}</span>
        </div>
        <div class="fan_title_theme2_box">
            <span>{{ props.fan_theme2 }}</span>
        </div>
        <div class="fan_title_status_box">
            <span>{{ props.fan_status }}</span>
        </div>
    </div>
</template>

<style scoped>
.fan_title_box{
    width: 100%;
    height: 100%;
}
.fan_title_back_image_box{
    position: absolute;
    left: 0;
    top: 6%;
    width: 100%;
    height: 45%;
    z-index: 1;
    background-repeat: no-repeat;
    /* background-image: url(`${props.fan_image}`); */
    overflow: hidden;
}
.fan_title_back_image_box img{
    position: absolute;
    left: 0;
    top: -200%;
    width: 100%;
    filter: blur(30px);
}
.fan_title_image_box{
    width: 19%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 15px;
}
.fan_title_image_box img{
    width: 70%;
    height: 80%;
    z-index: 2;
    border: 6px solid #fff;
    border-radius: 15px;
}
.fan_title_name_box{
    position: absolute;
    left: 17%;
    top: 12%;
    /* width: 7%; */
    /* height: 5%; */
    z-index: 2;
}
.fan_title_name_box span{
    font-size: 30px;
    z-index: 2;
    color: #fff;
    font-weight: 600;

}
.fan_title_update_time_box{
    position: absolute;
    left: 17%;
    top: 18%;
    width: 20%;
    height: 20%;
    z-index: 2;
}
.fan_title_update_time_box span{
    font-size: 15px;
    color: #fff;
    z-index: 2;
}

.fan_title_type_box{
    position: absolute;
    left: 25%;
    top: 13%;
    /* width: 30%; */
    /* height: 20%; */
    z-index: 2;
}
.fan_title_type_box span,
.fan_title_theme1_box span,
.fan_title_theme2_box span
{
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
}
.fan_title_theme1_box{
    position: absolute;
    left: 28%;
    top: 13%;
    /* width: 30%; */
    /* height: 20%; */
    z-index: 2;
}
.fan_title_theme2_box{
    position: absolute;
    left: 30.3%;
    top: 13%;
    /* width: 30%; */
    /* height: 20%; */
    z-index: 2;
}
.fan_title_status_box{
    position: absolute;
    left: 26%;
    top: 18%;
    width: 20%;
    height: 20%;
    z-index: 2;
}
.fan_title_status_box span{
    color: #fff;
    font-size: 15px;
}
</style>